<?php

use app\assets\AppAsset;

AppAsset::addCss($this, '/css/page/admin-role-index.css');
?>

<el-header class="top-wrapper" height="auto">
    <el-row :inline="true" class="button-container">
        <el-col :xs="9" :sm="7" :md="6" :lg="5">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :xs="15" :sm="17" :md="18" :lg="19" class="text-right">
            <el-button class="" size="mini" type="success"
                       @click.native="goToCreate()">
                新建
            </el-button>
            <el-dropdown size="mini">
                <el-button type="primary" size="mini">
                    更多操作
                    <i class="el-icon-arrow-down el-icon--right">
                    </i>
                </el-button>
                <el-dropdown-menu slot="dropdown">

                    <el-dropdown-item size="mini"
                                      @click.native="openItem(null)">
                        批量恢复
                    </el-dropdown-item>
                    <el-dropdown-item size="mini"
                                      @click.native="disabledItem(null)"
                                      divided>
                        批量禁用
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col class="padding-top-10" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip no-margin-top" style="display: none;">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                        温馨提示
                                    </span>
                        </template>
                        <div class="content">
                            <p>
                                1、菜单最多添加到3级，4及上不展示！
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </el-col>
    </el-row>
    <el-form :inline="true" :model="searchForm" @submit.native.prevent
             class=" search-container">
        <el-form-item label="状态" class="">
            <el-radio-group @change="getList()"
                            v-model="searchForm.status"
                            size="mini">
                <el-radio-button :label="key"
                                 v-for="(item, key) in setting.statusTxt">
                    {{item}}列表
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="名称过滤">
            <el-input placeholder="请输入内容"
                      v-model="searchTopValue" size="small"
                      class="input-with-select vert-align-init" type="text"
                      size="small">
                <el-select v-model="searchTopType" slot="prepend"
                           size="small" placeholder="请选择"
                           style="width: 130px;">

                    <el-option label="编号" value="id"></el-option>

                    <el-option label="名称" value="name"></el-option>

                </el-select>
                <el-button slot="append" icon="el-icon-search"
                           size="small" @click="getList">
                </el-button>
            </el-input>
        </el-form-item>
        <el-form-item label="" class="float-right el-form-item-more" style="display: none;">
            <el-button type="text" @click="moreSearchClick">
                        <span v-if="!setting.showAllSearch">
                            更多&nbsp;<i class="w-icon-dowMore"></i>
                        </span>
                <span v-else>
                            隐藏&nbsp;<i class="w-icon-upClose"></i>
                        </span>
            </el-button>
        </el-form-item>
        <el-collapse-transition style=" ">
            <div v-show="setting.showAllSearch" id="searchAllAni"
                 class="more-search-container">
                <!-- 此处添加[el-form-item] -->
            </div>
        </el-collapse-transition>
    </el-form>
</el-header>
<el-main class="content-wrapper">
    <!-- 主内容 START -->
    <el-table :data="dataList" style="width: 100%"
              @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column fixed prop="id" label="编号" width="100">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" :content="scope.row.id"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                        <span v-text="scope.row.id" class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light"
                            :content="scope.row.name" placement="top-start">
                    <div class="text-more-ellipsis">
                            <span v-text="scope.row.name"
                                  class="pointer text-over-flow"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="update_time" label="修改时间" width="120">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light"
                            :content="scope.row.update_time_text"
                            placement="top-start">
                    <div class="text-more-ellipsis">
                                <span v-text="scope.row.update_time_text_s"
                                      class="pointer"></span>
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="status_text" label="状态" width="80">
            <template slot-scope="scope">
                <div class="text-more-ellipsis">
                            <span v-if="scope.row.status == setting.status.disabled"
                                  v-text="scope.row.status_text"
                                  class="pointer text-danger"></span>
                    <span v-if="scope.row.status == setting.status.open"
                          v-text="scope.row.status_text" class="pointer"></span>
                </div>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="text" size="small"
                           @click.native="goToUpdate(scope.row.id)">编辑
                </el-button>
                <el-button type="text text-danger" size="small"
                           v-if="scope.row.status != setting.status.disabled"
                           @click.native="disabledItem(scope.row.id)">禁用
                </el-button>
                <el-button type="text text-success" size="small" v-else
                           @click.native="openItem(scope.row.id)">开启
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 主内容 表格 END -->
    <!-- 分页 START -->
    <div class="block pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="20"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal">
        </el-pagination>
    </div>
    <!-- 分页 END -->
</el-main>

<?= AppAsset::addScript($this, '/js/page/admin-role-index.js'); ?>
<?= $this->registerJs('
    new app();
'); ?>
